<template>
  <div>
    <div style="width: 100%; height: 60px; line-height: 60px;">
      <el-input v-model="input" placeholder="请输入搜索楼盘名称" style="width: 200px; float: left;  margin-top: 15px;"></el-input>
      <el-button type="primary" style="margin-left: 30px;" @click="chaxun">查询</el-button>
    </div>
    <div>
      <el-table :data="obj">
        <el-table-column label="序号" width="90">
          <template #default="scoped">
            <span>{{ scoped.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="id" label="手机号" width="180">
        </el-table-column>
        <el-table-column width="100" style="text-align: center;" label="操作">
          <template #default="scoped">
            <button style="border: 0; background-color: #fff; color: blue;" @click="del(scoped.row.id)">删除</button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination layout="prev, pager, next" :total="zongye">
      </el-pagination>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { userdata, userdel, usercha } from '../../api/mysql';
const input = ref('');
const obj = ref();
const zongye = ref();
//用户获取
const userlist = () => {
  userdata().then(res => {
    console.log(res.data.data);
    obj.value = res.data.data;
    zongye.value = res.data.data.length;
  })
}
userlist();
//用户查询
const chaxun = () => {
  const chashu = {
    username: input.value
  }
  usercha(chashu).then(res => {
    if (res.data.data.length == 1) {
      obj.value.length = 0;
      obj.value.push(res.data.data[0])
    }
    input.value = '';
  })
}
//用户数据列表删除
const del = (id: string) => {
  userdel(id).then(res => {
    console.log(res);
  })
  userlist();
}
</script>
<style></style>
